// .box1 {
//   width: 300px;
//   height: 300px;
//   background-color: pink;
// }

// .box1 .box2 {
//   width: 200px;
//   height: 200px;
//   background-color: hotpink;
// }

// .box1 .box2 .box3 {
//   width: 100px;
//   height: 100px;
//   background-color: deeppink;
// }

// .box2:hover .box3 {
//   background-color: lightpink;
// }

// 嵌套
.box1 {
  width: 300px;
  height: 300px;
  background-color: pink;

  // .box2 就是 .box1 后代元素
  .box2 {
    width: 200px;
    height: 200px;
    background-color: hotpink;

    // &代表的是父选择器
    // &在哪个选择器里面写，就代表这个选择器（.box2）
    &:hover {
      .box3 {
        background-color: lightpink;
      }
    }
    // 有问题
    // .box2:hover {
    //   .box3 {
    //     background-color: lightpink;
    //   }
    // }

    .box3 {
      width: 100px;
      height: 100px;
      background-color: deeppink;
    }
  }

  > .box3 {
    border: 1px solid #000;
    width: 50px;
    height: 50px;
  }
}
